import React, { Component } from 'react';
import Header from '../../components/Header';
import './MIne.less';
import {Swiper} from 'antd-mobile';
import { reqGetbanner } from '../../http/api';

export default class Mine extends Component {
  constructor(){
    super();
    this.state = {
      user: JSON.parse(localStorage.getItem('userInfo')),
      myBannerArr:[]
    }
  }
  componentDidMount(){
    reqGetbanner().then(res=>{
      if(res.data.code===200){
        this.setState({
          myBannerArr:res.data.list
        })
      }
    })
  }
  render() {
    let {user,myBannerArr} = this.state;
    return (
      <div className='Mine'>
          <Header title="我的" back></Header>
          <div className="bg">
            <div className="con">
              <div>nickname:{user.nickname}</div>
              <div>phone:{user.phone}</div>
            </div>
          </div>
          <div className="banner">
            <Swiper
              defaultIndex={0}
              indicatorProps={{'className':'indicator'}}
              style={{height:'100%'}}
              loop
              autoplay>
              {myBannerArr.map(item=>{
                return <Swiper.Item className="pic" key={item.id}>
                  <img src={item.img} alt="" />
                </Swiper.Item>
              })}
            </Swiper>
          </div>
      </div>
    )
  }
}
